<template>
  <el-cascader :options="data" :props="{ checkStrictly: true, value: 'deptId', label: 'deptName' }" :show-all-levels="false" clearable @change="onChange" v-model="selectDeptId"> </el-cascader>
</template>
<script>
import { listDept } from "@/api/system/dept";

export default {
  name: "DeptPicker",
  props: {
    muilt: {
      type: Boolean,
      default: true,
    },
    proOrg: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      title: "选择部门",
      data: [],
      selectedNode: null,
      selectedNodes: [],
      selectDeptId: "0",
    };
  },
  created() {
    this.getDept();
  },
  mounted() {},
  computed: {},
  methods: {
    getDept() {
      const that = this;
      listDept().then(res => {
        console.log(res, "select");
        let nodes = that.handleDeptTree(res.data);
        that.data = nodes;
      });
    },
    onChange(val) {
      this.$emit("onSelected", val[val.length - 1]);
    },
    handleDeptTree(data) {
      let config = {
        id: "deptId",
        parentId: "parentId",
        childrenList: "children",
      };

      var childrenListMap = {};
      var nodeIds = {};
      var tree = [];

      for (let d of data) {
        let parentId = d[config.parentId];
        if (childrenListMap[parentId] == null) {
          childrenListMap[parentId] = [];
        }
        nodeIds[d[config.id]] = d;
        childrenListMap[parentId].push(d);
      }

      for (let d of data) {
        let parentId = d[config.parentId];
        if (nodeIds[parentId] == null) {
          tree.push(d);
        }
      }

      for (let t of tree) {
        adaptToChildrenList(t);
      }

      function adaptToChildrenList(o) {
        if (childrenListMap[o[config.id]] !== null) {
          o[config.childrenList] = childrenListMap[o[config.id]];
        }
        if (o[config.childrenList]) {
          for (let c of o[config.childrenList]) {
            adaptToChildrenList(c);
          }
        }
      }
      return tree;
    },
  },
  watch: {
    proOrg(n, o) {
      console.log(n, o);
      this.selectDeptId = parseInt(n);
      console.log(this.selectDeptId);
      this.$forceUpdate();
      this.getDept();
    },
  },
};
</script>
<style scoped>
.title {
  line-height: 30px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #409eff;
  margin: unset !important;
}

.name-card {
  display: flex;
  align-items: center;
}

.name-card:hover {
  cursor: pointer;
}

.el-card {
  flex: 1;
  margin-left: 15px;
}

.card-form {
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
}

.el-card /deep/ .el-card__header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-card /deep/ .el-card__header > div > span {
  flex: 1;
}

.card-form .el-radio:first-of-type {
  margin-left: 30px;
}

.address-card /deep/ .el-card__body {
  display: flex;
  flex-flow: row;
  padding: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
}

.avatar img {
  width: inherit;
  height: inherit;
}

.info {
  flex: 1;
  display: flex;
  flex-flow: column;
  margin-left: 10px;
}

.name {
  flex: 1;
  font-size: 18px;
  border-bottom: 1px solid white;
  padding-bottom: 5px;
}

.name span {
  font-size: 13px;
  margin-left: 10px;
  color: grey;
}

.contact {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  color: white;
}
</style>
